<!-- components/cascade-horizontal/cascade-horizontal.vue -->
<template>
  <view class="container">
    <!-- 父级列表 -->
    <scroll-view class="parent-list" scroll-y>
      <view 
        v-for="item in parentData" 
        :key="item.id" 
        class="parent-item"
        :class="{ active: activeParent === item.id }"
        @click="selectParent(item)"
      >
        <view class="parent-indicator">
          <view class="indicator-line" :class="{ active: activeParent === item.id }"></view>
        </view>
        <text class="parent-text">{{ item.name }}</text>
      </view>
    </scroll-view>

    <!-- 子选项行 -->
    <scroll-view 
      class="child-scroll" 
      scroll-x
      v-if="activeChildren.length > 0"
    >
      <view class="child-row">
        <view 
          v-for="child in activeChildren" 
          :key="child.id" 
          class="child-item"
          :class="{ selected: isChildSelected(child) }"
          @click="toggleChild(child)"
        >
          <text class="child-text">{{ child.name }}</text>
          <view v-if="isChildSelected(child)" class="check-mark">✓</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'CascadeHorizontal',
  props: {
    parentData: {
      type: Array,
      default: () => [], // 数据结构：[{id,name,children:[{id,name}]}]
      required: true
    },
    defaultParent: {
      type: [Number, String],
      default: null
    },
    defaultChildren: {
      type: Array,
      default: () => []
    },
    multiple: {
      type: Boolean,
      default: false // 是否允许多选
    }
  },
  data() {
    return {
      activeParent: this.defaultParent,
      selectedChildren: [...this.defaultChildren]
    }
  },
  computed: {
    activeChildren() {
      const parent = this.parentData.find(p => p.id === this.activeParent)
      return parent ? parent.children : []
    }
  },
  methods: {
    selectParent(item) {
      this.activeParent = item.id
      if (!this.multiple) {
        this.selectedChildren = []
      }
      this.$emit('parent-change', item.id)
    },

    toggleChild(child) {
      if (this.multiple) {
        const index = this.selectedChildren.findIndex(c => c.id === child.id)
        index === -1 
          ? this.selectedChildren.push(child) 
          : this.selectedChildren.splice(index, 1)
      } else {
        this.selectedChildren = [child]
      }
      this.$emit('change', {
        parentId: this.activeParent,
        children: this.selectedChildren
      })
    },

    isChildSelected(child) {
      return this.selectedChildren.some(c => c.id === child.id)
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  height: 600rpx;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8rpx;
}

.parent-list {
  width: 240rpx;
  border-right: 1px solid #eee;
}

.parent-item {
  padding: 28rpx 24rpx;
  position: relative;
  transition: all 0.3s;
}

.parent-item.active {
  background-color: #f8faff;
}

.parent-indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6rpx;
}

.indicator-line {
  width: 100%;
  height: 100%;
  background: transparent;
  transition: all 0.3s;
}

.indicator-line.active {
  background: #2979ff;
}

.parent-text {
  font-size: 28rpx;
  color: #333;
}

.child-scroll {
  flex: 1;
  padding: 20rpx 0;
}

.child-row {
  display: inline-flex;
  padding: 0 20rpx;
  gap: 20rpx;
}

.child-item {
  padding: 16rpx 32rpx;
  background: #f5f5f5;
  border-radius: 40rpx;
  position: relative;
  flex-shrink: 0;
}

.child-item.selected {
  background: #2979ff;
}

.child-text {
  font-size: 26rpx;
  color: #666;
}

.child-item.selected .child-text {
  color: #fff;
}

.check-mark {
  position: absolute;
  right: -8rpx;
  top: -8rpx;
  width: 32rpx;
  height: 32rpx;
  background: #ff4444;
  border-radius: 50%;
  color: #fff;
  font-size: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>